<template>
  <view class="device-list">
    <scroll-view
      class="scroll-view"
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <device-card
        v-for="item in deviceList"
        :key="item.pumpId"
        :device-name="item.pumpName"
        :address="item.address"
        :status="item.pumpState"
        :device-image="item.imageUrl"
        @click="handleDeviceClick(item)"
      />
      <view class="loading" v-if="loading">加载中...</view>
      <view class="no-more" v-if="noMore">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import DeviceCard from "@/components/DeviceCard.vue";
import { onLoad } from "@dcloudio/uni-app";
import { getDeviceList, getDictionary } from "@/api/index";
import { pictureUrl } from "@/utils/index";

interface DeviceItem {
  pumpId: string;
  pumpName: string;
  address: string;
  pumpState: string;
  imageUrl: string;
  [key: string]: any;
}

const deviceList = ref<DeviceItem[]>([]);
const pageNum = ref(1);
const pageSize = ref(10);
const loading = ref(false);
const noMore = ref(false);
const isRefreshing = ref(false);
const deviceType = ref(1);
const total = ref(0);
const statusList = ref([]);
onMounted(() => {
  //   getDictionary({ type: "3" }).then((res) => {
  //     statusList.value = res.data;
  //   });
});
// 获取设备列表数据
const fetchDeviceList = async (page: number, refresh = false) => {
  if (loading.value) return;
  loading.value = true;

  try {
    const { data } = await getDeviceList({
      type: deviceType.value,
	  types:deviceType.value =="1"?'1,11,12':''
    });

    // total.value = totalCount;
    const result = data.map((item: DeviceItem) => {
      return {
        ...item,
        imageUrl: item.imageUrl ? item.imageUrl.replace("E:", pictureUrl) : "",
      };
    });
    if (refresh) {
      deviceList.value = result;
    } else {
      deviceList.value = [...deviceList.value, ...result];
    }

    // noMore.value = deviceList.value.length >= total.value;
  } catch (error) {
  } finally {
    loading.value = false;
    isRefreshing.value = false;
  }
};

// 加载更多
const loadMore = async () => {
  //   if (loading.value || noMore.value) return;
  //   pageNum.value++;
  //   await fetchDeviceList(pageNum.value);
};

// 刷新列表
const onRefresh = async () => {
  isRefreshing.value = true;
  //   pageNum.value = 1;
  //   noMore.value = false;
  await fetchDeviceList(1, true);
};

// 点击设备卡片
const handleDeviceClick = (device: DeviceItem) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${device.pumpId}`,
  });
};

onLoad((options) => {
  if (options?.type) {
    deviceType.value = Number(options.type);
  }
  fetchDeviceList(1);
});
</script>

<style lang="scss" scoped>
.device-list {
  height: 100vh;
  background: #f5f5f5;

  .scroll-view {
    height: 100%;
  }

  .loading,
  .no-more {
    text-align: center;
    padding: 20rpx;
    color: #999;
    font-size: 24rpx;
  }
}
</style>
